<html>
<title>计算属性</title>

<head>
    <script src="./js/vue.js"></script>
    <script>
        window.onload = function () {
            let vm1 = new Vue({
                el: '.container',
                data: {//普通属性
                    msg: "这是普通属性数据",
                    name: "abc"
                },
                computed: {//计算属性，类似于Java中的getter，对数据处理后进行返回，可以自动进行监视
                    msg2: function () {
                        return "这是计算属性数据"
                    },
                    name2:function(){//计算属性可以对数据自动进行监视，和方法区别：
                        //（1）计算属性基于它的依赖进行更新，只有在相关依赖发生改变时才能更新变化
                        //(2)计算属性具有缓存，只要依赖没有更新，得到的值都是从缓存中的值，不会从新计算
                        //可以修改计算属性（类似于java中的setter），计算属性的修改实际上修改的是计算属性所依赖的值
                        return this.name.toUpperCase();
                    }
                }
            })
        }
    </script>
</head>

<body>
    <div class="container">
        <h3>{{ msg }}<h3/>
        <br>
        <h3>{{ msg2 }}<h3/>
        <br>
        <input type="text" v-model="name">
        <h3>{{ name2 }}</h3>
    </div>
</body>

</html>